<template>
    <div class="alarmStatisticsContent">
        <img src="@/assets/bigScreen/icons/left/moduls_bg.png" alt="">
        <div class="titles_moduls">
            <img src="@/assets/bigScreen/icons/left/gjtj.png" alt="">
            告警统计
        </div>

        <div class="alarm_list">
            <div class="alarm_list_item" v-for="(item, index) in data" :key="index" :title="item.content">
                <div class="alarm_level" :class="`alarm_level${item.level}`">
                    <img :src="require(`@/assets/bigScreen/icons/left/alarm${item.level || '4'}.png`)" alt="">
                    {{ item.level == 1 ? '一般' : item.level == 2 ? '重要' : item.level == 3 ? '严重' :
                        item.level == 1 ? '紧急' : '未知' }}
                </div>
                <div class="line"></div>
                <div class="alarm_content">{{ item.content }}</div>
                <div class="line"></div>
                <div class="alarm_date">{{ item.alertTime }}</div>
            </div>

        </div>

    </div>
</template>

<script>
import { getAlarmStatistics } from "@/api/bigScreen/home.js";

export default {
    components: {
    },
    data() {
        return {
            data: [
                {
                    level: 1,
                    content: '告警内内告警告内容警内容告警内容告警内容',
                    alertTime: '2025-02-20 12:25'
                }, {
                    level: 2,
                    content: '告警内内告警告内容警内容告警内容告警内容',
                    alertTime: '2025-02-20 12:25'
                }, {
                    level: 3,
                    content: '告警内内告警告内容警内容告警内容告警内容',
                    alertTime: '2025-02-20 12:25'
                }, {
                    level: 4,
                    content: '告警内内告警告内容警内容告警内容告警内容',
                    alertTime: '2025-02-20 12:25'
                }, {
                    level: 3,
                    content: '告警内内告警告内容警内容告警内容告警内容',
                    alertTime: '2025-02-20 12:25'
                }, {
                    level: 4,
                    content: '告警内内告警告内容警内容告警内容告警内容',
                    alertTime: '2025-02-20 12:25'
                }
            ]
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            getAlarmStatistics().then(res => {
                if (res.code == 200) {
                    this.data = res.data
                }
            })
        }
    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kk';
    src: url('../../../../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'al';
    src: url('../../../../../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
    font-weight: normal;
    font-style: normal;
}

.alarmStatisticsContent {
    width: 100%;
    position: relative;

    img {
        width: 100%;
    }


    .titles_moduls {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        top: 3%;
        left: 1.5%;

        img {
            width: 1.2vw;
            margin-right: 0.5208vw;
        }


        font-size: 0.8333vw;
        font-weight: 400;
        letter-spacing: 0.0208vw;
        font-family: kk;
        color: transparent;
        background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;

    }

    .alarm_list {
        width: 100%;
        height: 12.5vw;
        position: absolute;
        top: 16%;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow-y: scroll; // 保留滚动功能
        scrollbar-width: none; // 隐藏滚动条
        -ms-overflow-style: none; // IE/Edge隐藏滚动条

        &::-webkit-scrollbar {
            display: none; // Chrome/Safari隐藏滚动条
        }

        .alarm_list_item {
            width: 96%;
            padding: 1% 1.5%;
            border: 1px solid rgba(0, 255, 240, .3);
            border-radius: 20px;
            margin-bottom: 0.4167vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;

            .line {
                width: 0;
                height: 1.25vw;
                opacity: 0.5;
                border: 1px solid rgba(4, 62, 108, 1);
            }

            .alarm_level {
                width: 15%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-family: kk;

                font-size: 0.7292vw;
                font-weight: 400;

                img {
                    width: 1.2vw;
                    margin-right: 0.4167vw;
                }

                &1 {
                    color: transparent;
                    background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                }

                &2 {
                    color: transparent;
                    background-image: linear-gradient(180deg, rgba(84, 240, 188, 1) 0%, rgba(42, 222, 94, 1) 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                }

                &3 {
                    color: transparent;
                    background-image: linear-gradient(180deg, rgba(255, 235, 59, 1) 0%, rgba(255, 176, 58, 1) 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                }

                &4 {
                    color: transparent;
                    background-image: linear-gradient(180deg, rgba(255, 119, 112, 1) 0%, rgba(225, 64, 56, 1) 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                }
            }


            .alarm_content {
                width: 55%;
                font-size: .625vw;
                font-weight: 400;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: rgba(255, 255, 255, 1);
            }

            .alarm_date {
                width: 25%;
                font-size: .625vw;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                text-align: right;
            }

        }
    }
}
</style>